<template>
    <div class="task">
        <a-tabs justify v-model:active-key="activeKey">
            <template #extra>
                <a-button type="text" status="danger" @click="closeTaskPanel">
                    <template #icon>
                        <icon-close />
                    </template>
                </a-button>
            </template>
            <a-tab-pane title="进行中" key="1">
                <a-table :data="runList" :scroll="{ y: '100%' }">
                    <template #columns>
                        <a-table-column title="操作" data-index="name" />
                        <a-table-column title="进行中">
                            <template #cell="{ record }">
                                <a-progress :percent="record.progress / record.total" />
                            </template>
                        </a-table-column>
                        <a-table-column title="存储类型">
                            <template #cell="{ record }">
                                <a-tag v-if="record.storageType === StorageTypeEnum.WEBDAV" color="blue">WebDAV</a-tag>
                            </template>
                        </a-table-column>
                    </template>
                </a-table></a-tab-pane>
            <a-tab-pane title="成功" key="2">
                <a-table :data="successList" :scroll="{ y: '100%' }">
                    <template #columns>
                        <a-table-column title="操作" data-index="name" />
                        <a-table-column title="存储类型">
                            <template #cell="{ record }">
                                <a-tag v-if="record.storageType === StorageTypeEnum.WEBDAV" color="blue">WebDAV</a-tag>
                            </template>
                        </a-table-column>
                        <a-table-column title="开始时间">
                            <template #cell="{ record }">
                                {{ prettyDate(record.createTime) }}
                            </template>
                        </a-table-column>
                        <a-table-column title="完成时间">
                            <template #cell="{ record }">
                                {{ prettyDate(record.doneTime) }}
                            </template>
                        </a-table-column>
                        <a-table-column title="运行时间（ms）" data-index="time" />
                    </template>
                </a-table></a-tab-pane>
            <a-tab-pane title="失败" key="3">
                <a-table :data="failList" :scroll="{ y: '100%' }">
                    <template #columns>
                        <a-table-column title="操作" data-index="name" />
                        <a-table-column title="存储类型">
                            <template #cell="{ record }">
                                <a-tag v-if="record.storageType === StorageTypeEnum.WEBDAV" color="blue">WebDAV</a-tag>
                            </template>
                        </a-table-column>
                        <a-table-column title="开始时间">
                            <template #cell="{ record }">
                                {{ prettyDate(record.createTime) }}
                            </template>
                        </a-table-column>
                        <a-table-column title="完成时间">
                            <template #cell="{ record }">
                                {{ prettyDate(record.doneTime) }}
                            </template>
                        </a-table-column>
                        <a-table-column title="运行时间（ms）" data-index="time" />
                    </template>
                </a-table></a-tab-pane>
            <a-tab-pane title="取消" key="4">
                <a-table :data="cancelList" :scroll="{ y: '100%' }">
                    <template #columns>
                        <a-table-column title="操作" data-index="name" />
                        <a-table-column title="存储类型">
                            <template #cell="{ record }">
                                <a-tag v-if="record.storageType === StorageTypeEnum.WEBDAV" color="blue">WebDAV</a-tag>
                            </template>
                        </a-table-column>
                        <a-table-column title="开始时间">
                            <template #cell="{ record }">
                                {{ prettyDate(record.createTime) }}
                            </template>
                        </a-table-column>
                        <a-table-column title="完成时间">
                            <template #cell="{ record }">
                                {{ prettyDate(record.doneTime) }}
                            </template>
                        </a-table-column>
                        <a-table-column title="运行时间（ms）" data-index="time" />
                    </template>
                </a-table></a-tab-pane>
        </a-tabs>
    </div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import { useTaskStore } from "../store/TaskStore";
import { mapState } from "pinia";

import XEUtils from 'xe-utils'
import StorageTypeEnum from "@/module/storage/enumeration/StorageTypeEnum";

export default defineComponent({
    name: 'task',
    data: () => ({
        StorageTypeEnum,
        activeKey: '1'
    }),
    computed: {
        ...mapState(useTaskStore, ['successList', 'runList', 'failList', 'cancelList'])
    },
    methods: {
        closeTaskPanel() {
            useTaskStore().closeTaskPanel();
        },
        prettyDate(date: Date) {
            return XEUtils.toDateString(date, 'yyyy-MM-dd HH:ss:mm')
        }
    }
});
</script>
<style lang="less">
.task {
    height: 100%;
}
</style>